<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <!-- 性能优化：添加DNS预解析 -->
    <link rel="dns-prefetch" href="https://fonts.googleapis.com" />
    <link rel="dns-prefetch" href="https://fonts.gstatic.com" />

    <!-- SEO优化 -->
    <title>Cirno AI - 智能对话助手</title>
    <meta
      name="description"
      content="Cirno AI - 一个类似DeepSeek的AI聊天应用"
    />
    <meta name="keywords" content="AI,聊天助手,智能对话,Cirno AI" />
    <meta name="author" content="Cirno AI Team" />

    <!-- 移动端优化 -->
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
    />
    <meta name="theme-color" content="#4A00E0" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="default" />

    <!-- 主要favicon - SVG格式 -->
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <!-- 针对Safari浏览器的备用图标 -->
    <link rel="apple-touch-icon" href="/favicon.svg" />
    <!-- 针对IE浏览器的备用图标 -->
    <link rel="shortcut icon" href="/favicon.svg" type="image/svg+xml" />
    <!-- PWA支持 -->
    <link rel="manifest" href="/manifest.json" />

    <!-- 资源预加载 -->
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap"
      rel="stylesheet"
    />

    <!-- 暗色模式初始化脚本 -->
    <script>
      // 在页面加载前就设置主题，避免闪烁
      (function () {
        // 检查本地存储中的主题设置
        const savedTheme = localStorage.getItem("theme");
        // 检查系统偏好
        const prefersDark = window.matchMedia(
          "(prefers-color-scheme: dark)"
        ).matches;

        // 如果明确设置了dark主题，或者没有设置但系统偏好是dark
        if (savedTheme === "dark" || (!savedTheme && prefersDark)) {
          document.documentElement.classList.add("dark");
        } else {
          document.documentElement.classList.remove("dark");
        }
      })();
    </script>

    <!-- 性能优化 -->
    <link rel="modulepreload" href="/src/main.tsx" />
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>

    <!-- 添加加载指示器 -->
    <noscript>
      <div style="text-align: center; padding: 2rem">
        请启用JavaScript以使用Cirno AI
      </div>
    </noscript>
  </body>
</html>
